<!--Description:-->
<!--Created by wxy on 2018/9/19-->
<!--
参数   menuItems: 菜单列表(数组，title:菜单名称[必填]; methodName:抛出事件名称[必填];  show: 隐藏菜单[选填 默认为true 表示显示]; disabled:禁用[选填，默认为false 表示可用])
eg:   <right-context-menu ref="menu" :menu-items="rightContextMenuItems" @edit="methodA" @delete="methodB"></right-context-menu>
      rightContextMenuItems:[{
        title:'编辑',
        methodName:'edit'
      },{
        title:'删除',
        methodName:'delete'
      }]
-->
<template>
  <div class="menu-wrap" v-bind:style="{ left: menuPosition.x+'px', top: menuPosition.y+'px' }" v-show="isShowMenu">
    <el-menu>
      <el-menu-item v-for="(menu,index) in menuItems" :index="'item-'+index" @click="clickMenu(menu.methodName)" v-show="(typeof(menu.show) === 'undefined') || menu.show" :disabled="menu.disabled">
        <span>{{menu.title}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'rightContextMenu',
  props: ['menuItems'],
  data() {
    return {
      isShowMenu: false,
      menuPosition: {
        x: '',
        y: ''
      },
    }
  },
  created() {
    document.addEventListener('click', this.hide)
  },
  destroyed() {
    document.removeEventListener('click', this.hide)
  },

  methods: {
    show() {
      this.isShowMenu = true
      this.menuPosition.x = event.clientX
      this.menuPosition.y = event.clientY
    },
    hide() {
      this.isShowMenu = false
    },
    clickMenu(methodName) {
      this.$emit(methodName)
    }
  }
}
</script>

<style scoped lang="scss">
.menu-wrap {
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  z-index: 1000;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  .el-menu-item {
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    color: #606266;
  }
}
</style>